import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import {SmartAssets} from '@react-native-oh-tpl/react-native-smartassets';

const SmartAssetsImage = () => {
  SmartAssets.initSmartAssets();
  return (
    <View style={styles.imageGrid}>
      {/* <Text style={styles.imageLabel}>SmartAssetsImage</Text> */}
      <View style={styles.imageItem}>
        <Image
          source={require('../../assets/avatar.png')}
          style={styles.image}
          resizeMode="contain"
        />
        <Image
          source={require('../../assets/hotdog.jpg')}
          style={styles.image}
          resizeMode="contain"
        />
        <Image
          source={{uri: 'https://picsum.photos/200/200'}}
          style={styles.image}
          resizeMode="contain"
        />
      </View>
    </View>
  )
};

export const displayName = 'SmartAssetsImage';
export const framework = 'React';
export const category = 'UI';
export const title = 'SmartAssetsImage';
export const documentationURL = '';
export const description = 'Simple React Native smartAssets component.';

export const examples = [
  {
    title: 'smartassets',
    render: function (): any {
      return <SmartAssetsImage />;
    },
  },
];
const styles = StyleSheet.create({
  imageGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 15,
    justifyContent: 'space-around',
  },
  imageItem: {
    alignItems: 'center',
    marginBottom: 10,
    width: '50%',
  },
  image: {
    width: 100,
    height: 100,
    backgroundColor: '#333',
    borderRadius: 5,
  },
  imageLabel: {
    fontSize: 10,
    color: '#666',
    marginBottom: 5,
    textAlign: 'center',
  },
})